<template>
    <el-form :model="formData" label-width="100px">
        <el-form-item label="客户阶段">
            <div class="check-box">
                <el-checkbox
                    v-model="checkAllStatus"
                    class="all-check"
                    :indeterminate="isIndeterminateStatus"
                    @change="allStatus">
                    全部
                </el-checkbox>
                <el-checkbox-group v-model="formData.customer_phase" @change="changStatus">
                    <el-checkbox v-for="(item, index) in stageListOptList" :key="index" :label="item.id">
                        {{ item.name }}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
        </el-form-item>
        <el-form-item label="跟进次数">
            <el-input
                v-model.number="formData.follow_up_times_min"
                class="item-input input-left"
                onkeyup="value=value.replace(/[^0-9]/g,'')"
                placeholder="最小值"
                @input="handleNum(1)">
            </el-input>
            ~
            <el-input
                v-model.number="formData.follow_up_times_max"
                class="item-input"
                onkeyup="value=value.replace(/[^0-9]/g,'')"
                placeholder="最大值"
                @input="handleNum(2)">
            </el-input>
        </el-form-item>
        <el-form-item class="form-item" label="最后跟进时间">
            <el-button :class="fllowTime == 3 ? 'time-color' : ''" @click="changeTime(3, 1)">近3天</el-button>
            <el-button :class="fllowTime == 7 ? 'time-color' : ''" @click="changeTime(7, 1)">近7天</el-button>
            <el-button :class="fllowTime == 15 ? 'time-color' : ''" @click="changeTime(15, 1)">近15天</el-button>
            <el-button :class="fllowTime == 30 ? 'time-color' : ''" @click="changeTime(30, 1)">近30天</el-button>
            <el-button :class="fllowTime == -2 ? 'time-color' : ''" @click="changeTime(-2, 1)">近N天</el-button>
            <el-input-number
                v-if="fllowTime == -2"
                v-model.number="follow_day"
                class="right-input"
                :controls="false"
                :precision="0"
                :min="1"
                :max="1000"
                @blur="changeFollowDay"></el-input-number>
            <el-button :class="fllowTime == 0 ? 'time-color' : ''" @click="changeTime(0, 1)">自定义</el-button>
            <el-date-picker
                v-if="showAddTime"
                v-model="formData.last_follow_up_time"
                type="datetimerange"
                class="right-picker"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 380px; margin-left: 10px; vertical-align: middle">
            </el-date-picker>
            <el-button :class="fllowTime == -1 ? 'time-color' : ''" class="right-item" @click="changeTime(-1, 1)">
                不限制
            </el-button>
        </el-form-item>
        <el-form-item v-show="is_open_session_archive" class="form-item" label="上次聊天时间">
            <div>
                <el-button :class="chatTime == 3 ? 'time-color' : ''" @click="changeTime(3, 2)">近3天</el-button>
                <el-button :class="chatTime == 7 ? 'time-color' : ''" @click="changeTime(7, 2)">近7天</el-button>
                <el-button :class="chatTime == 15 ? 'time-color' : ''" @click="changeTime(15, 2)">近15天</el-button>
                <el-button :class="chatTime == 30 ? 'time-color' : ''" @click="changeTime(30, 2)">近30天</el-button>
                <el-button :class="chatTime == -2 ? 'time-color' : ''" @click="changeTime(-2, 2)">近N天</el-button>
                <el-input-number
                    v-if="chatTime == -2"
                    v-model.number="chat_day"
                    class="right-input"
                    :controls="false"
                    :precision="0"
                    :min="1"
                    :max="1000"
                    @blur="changeChatDay"></el-input-number>
                <el-button :class="chatTime == 0 ? 'time-color' : ''" @click="changeTime(0, 2)">自定义</el-button>
                <el-date-picker
                    v-if="showLastTime"
                    v-model="formData.last_chat_time"
                    type="datetimerange"
                    class="right-picker"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    style="width: 380px; margin-left: 10px; vertical-align: middle">
                </el-date-picker>
                <el-button :class="chatTime == -1 ? 'time-color' : ''" class="right-item" @click="changeTime(-1, 2)">
                    不限制
                </el-button>
                <div class="tips">该功能需开通消息存档，且客户同意消息存档才可记录。</div>
            </div>
        </el-form-item>
        <el-form-item v-show="is_open_session_archive" class="form-item" label="聊天回复">
            <div>
                <el-switch v-model="isChat" :disabled="!is_open_session_archive" @change="changeChat" />
                <div v-if="isShow">
                    客户超过
                    <el-input
                        v-model.number="formData.chat_reply_time"
                        onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                        class="item-input"></el-input>
                    <el-select v-model="formData.chat_reply_time_type" class="item-input">
                        <el-option label="分钟" value="minute" />
                        <el-option label="小时" value="hour " />
                        <el-option label="天" value="day" />
                    </el-select>
                    没有回复。
                    <el-popover
                        placement="top-start"
                        :width="200"
                        trigger="hover"
                        content="1、添加客户，客户一直没有回复，以添加客户的时间计算。2、客户最后一次回复时间计算。">
                        <template #reference>
                            <el-icon class="pop_icon"><question-filled /></el-icon>
                        </template>
                    </el-popover>
                </div>
                <div v-show="isShow" class="tips">该功能需开通消息存档，且客户同意消息存档才可记录</div>
            </div>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref, reactive, watch } from 'vue';
import { getDiffDay } from '@/utils/utils';
import { getDay } from '@/utils/timeCycle';
import { stageList } from '@/api/customerCenter/labellagroup';
import { ruleArchived } from '@/api/rules';
import { getSetionId } from '@/utils/utils';
const follow_day = ref(60);
const chat_day = ref(60);
const formData = reactive({
    customer_phase: [],
    follow_up_times_min: '', //最小值
    follow_up_times_max: '', //最大值
    last_follow_up_time: [] as any[],
    last_follow_up_day: 0, //跟进近n天 0为自定义和不限制 自定义需传last_follow_up_time不限制传[]
    last_chat_time: [] as any[],
    last_chat_day: 0, //上次聊天近n天 自定义需传last_chat_time不限制传[]
    chat_reply: 2, //1 是开启聊天回复的 2是关闭的
    chat_reply_time: 5, //超过多少时间
    chat_reply_time_type: 'minute' //时间类型minute 分钟 hour 小时day天
});
const checkAllStatus = ref(false); //是否全部选中客户阶段
const isIndeterminateStatus = ref(); //客户阶段状态
const is_open_session_archive = ref(0);
const stageListOptList = ref([]);
const isChat = ref(false);
const showAddTime = ref(false);
const showLastTime = ref(false);
const isShow = ref(false);
const fllowTime = ref(-1);
const chatTime = ref(-1);
const props = defineProps(['connect_property']);
//校验
const handleNum = (val: number) => {
    if (val == 1 && formData.follow_up_times_min == 0) {
        formData.follow_up_times_min = '';
    } else if (val == 2 && formData.follow_up_times_max == 0) {
        formData.follow_up_times_max = '';
    }
};
// 获取客户阶段字典
const stageListFun = () => {
    stageList({ page: 1, page_size: 99999 }).then((r: any) => {
        stageListOptList.value = r || [];
    });
};
stageListFun();
//获取是否开启会话存档
const getArchived = () => {
    ruleArchived().then((r: any) => {
        is_open_session_archive.value = r.is_open_session_archive;
    });
};
getArchived();
//切换最后跟进时间or上次聊天时间
const changeTime = (type: any, val: any) => {
    val == 1 ? (fllowTime.value = type) : (chatTime.value = type);
    val == 1 ? (showAddTime.value = false) : (showLastTime.value = false);
    if (type != 0) {
        val == 1 ? (formData.last_follow_up_time = []) : (formData.last_chat_time = []);
    }
    switch (type) {
        case 3:
            return val == 1 ? (formData.last_follow_up_day = 3) : (formData.last_chat_day = 3);
        case 7:
            return val == 1 ? (formData.last_follow_up_day = 7) : (formData.last_chat_day = 7);
        case 15:
            return val == 1 ? (formData.last_follow_up_day = 15) : (formData.last_chat_day = 15);
        case 30:
            return val == 1 ? (formData.last_follow_up_day = 30) : (formData.last_chat_day = 30);
        case 0:
            val == 1 ? (formData.last_follow_up_day = 0) : (formData.last_chat_day = 0);
            return val == 1 ? (showAddTime.value = true) : (showLastTime.value = true);
        case -1:
            return val == 1 ? (formData.last_follow_up_day = 0) : (formData.last_chat_day = 0);
        case -2:
            return val == 1
                ? (formData.last_follow_up_day = follow_day.value)
                : (formData.last_chat_day = chat_day.value);
    }
};
//切换聊天回复
const changeChat = (val: any) => {
    val ? (isShow.value = true) : (isShow.value = false);
    if (!val) {
        formData.chat_reply = 2;
        (formData.chat_reply_time = 5), //超过多少时间
            (formData.chat_reply_time_type = 'minute'); //时间类型minute 分钟 hour 小时 day 天
    } else {
        formData.chat_reply = 1;
    }
};
//选中全部客户阶段
const allStatus = (val: boolean) => {
    formData.customer_phase = [];
    formData.customer_phase = val ? selectAllSource() : [];
    isIndeterminateStatus.value = false;
};
//切换客户阶段
const changStatus = (val: any) => {
    const checkedCount = val.length;
    checkAllStatus.value = checkedCount === stageListOptList.value.length;
    isIndeterminateStatus.value = checkedCount > 0 && checkedCount < stageListOptList.value.length;
};
//全部选中客户阶段
const selectAllSource = () => {
    stageListOptList.value.forEach((item: any) => {
        formData.customer_phase.push(item.id);
    });
    return formData.customer_phase;
};
// 最后跟进时间切换近N天
const changeFollowDay = () => {
    formData.last_follow_up_day = follow_day.value || 60;
    follow_day.value = follow_day.value || 60;
};
// 上次聊天时间切换近N天
const changeChatDay = () => {
    formData.last_chat_day = chat_day.value || 60;
    chat_day.value = chat_day.value || 60;
};
const updateData = (val: any) => {
    formData.customer_phase = [];
    val.customer_phase.length == 0 ? (formData.customer_phase = []) : (formData.customer_phase = val.customer_phase);
    if (val.customer_phase.length == stageListOptList.value.length) {
        checkAllStatus.value = true;
        isIndeterminateStatus.value = false;
    } else if (val.customer_phase.length > 0) {
        isIndeterminateStatus.value = true;
    }
    val.follow_up_times_min == 0
        ? (formData.follow_up_times_min = '')
        : (formData.follow_up_times_min = val.follow_up_times_min);
    val.follow_up_times_max == 0
        ? (formData.follow_up_times_max = '')
        : (formData.follow_up_times_max = val.follow_up_times_max);
    val.chat_reply == 1 ? (formData.chat_reply = 1) : (formData.chat_reply = 2);
    val.chat_reply == 1 ? (isChat.value = true) : (isChat.value = false);
    formData.chat_reply_time = val.chat_reply_time;
    formData.chat_reply_time_type = val.chat_reply_time_type;
    isChat.value ? (isShow.value = true) : (isShow.value = false);
    formData.last_follow_up_time = val.last_follow_up_time;
    formData.last_follow_up_day = val.last_follow_up_day;
    if (val.last_follow_up_time && val.last_follow_up_time.length > 0) {
        fllowTime.value = 0;
        showAddTime.value = true;
    } else {
        if (val.last_follow_up_day == 0) {
            fllowTime.value = -1;
        } else {
            if ([3, 7, 15, 30].includes(val.last_follow_up_day)) {
                fllowTime.value = val.last_follow_up_day;
            } else {
                fllowTime.value = -2;
                follow_day.value = val.last_follow_up_day;
            }
        }
    }
    formData.last_chat_time = val.last_chat_time;
    formData.last_chat_day = val.last_chat_day;
    if (val.last_chat_time && val.last_chat_time.length > 0) {
        chatTime.value = 0;
        showLastTime.value = true;
    } else {
        if (val.last_chat_day == 0) {
            chatTime.value = -1;
        } else {
            if ([3, 7, 15, 30].includes(val.last_chat_day)) {
                chatTime.value = val.last_chat_day;
            } else {
                chatTime.value = -2;
                chat_day.value = val.last_chat_day;
            }
        }
    }
};
watch(
    () => props.connect_property,
    val => {
        if (val && val.id) {
            updateData(val);
        }
    }
);
defineExpose({
    formData,
    fllowTime,
    chatTime
});
</script>
<style scoped lang="scss">
.form-item {
    margin: 10px 0;

    .right-item {
        margin-left: 10px;
    }

    .tips {
        font-size: 12px;
        font-weight: 300;
        color: #969696;
        line-height: 14px;
        margin-top: 16px;
    }

    .pop_icon {
        vertical-align: middle;
        margin-top: -2px;
    }

    .time-color {
        background-color: #ff6b00;
        color: #fff;
    }
}

.item-input {
    width: 90px;
    margin: 0 5px;
}

.input-left {
    margin-left: 0;
}

.check-box {
    display: flex;

    .all-check {
        margin-right: 30px;
    }
}

.right-input {
    width: 90px;
    margin: 0 12px;
}
</style>
